import { ListView } from 'antd-mobile';
import React from 'react'
import ReactDOM from 'react-dom'
import Shop from '../components/Shop'

export default class Demo extends React.Component {
    constructor(props) {
        super(props);
        const dataSource = new ListView.DataSource({
            rowHasChanged: (row1, row2) => {
                return row1 !== row2
            },
        });
        this.state = {
            dataSource,
            isLoading: true,
            height: document.documentElement.clientHeight,
            useBodyScroll: true,
            pageIndex: 1
        };
    }
    componentDidUpdate() {
        document.body.style.overflow = 'auto';
    }
    componentDidMount() {
        const hei = this.state.height - ReactDOM.findDOMNode(this.lv).offsetTop;
        this.$postData('/api/goods/getRecommendGoodsList', { pageNum: 1, pageSize: 20 }, (params) => {
            //console.log(params)
            this.setState({
                height: hei,
                isLoading: false,
                dataSource: this.state.dataSource.cloneWithRows(params.data.list),
            })
            this.rData = params.data.list
        })
    }

    // onRefresh = () => {
    //     this.setState({ refreshing: true, isLoading: true });
    //     // simulate initial Ajax
    //     setTimeout(() => {
    //         this.rData = this.genData();
    //         this.setState({
    //             dataSource: this.state.dataSource.cloneWithRows(this.rData),
    //             refreshing: false,
    //             isLoading: false,
    //         });
    //     }, 600);
    // };

    onEndReached = (event) => {
        // load new data
        // hasMore: from backend data, indicates whether it is the last page, here is false
        if (this.state.isLoading && !this.state.hasMore) {
            return;
        }
        // console.log('reach end', event, this.state);
        this.setState({ isLoading: true });
        this.$postData('/api/goods/getRecommendGoodsList', { pageNum: this.state.pageIndex + 1, pageSize: 20 }, (params) => {
            //console.log(params)
            this.rData = [...this.rData, ...params.data.list];
            //console.log(this.rData)
            this.setState({
                isLoading: false,
                dataSource: this.state.dataSource.cloneWithRows(this.rData),
                pageIndex: this.state.pageIndex + 1
            })

        })
        return
    };

    render() {
        const separator = (sectionID, rowID) => (
            <div
                key={`${sectionID}-${rowID}`}
                style={{
                    height: 8,
                    // backgroundColor: '#F5F5F9',
                    // borderTop: '1px solid #ECECED',
                    // borderBottom: '1px solid #ECECED',
                }}
            />
        );
        const row = (rowData, sectionID, rowID) => {
            return (
                <div key={rowID}
                    style={{
                        width: '40vw'
                    }}
                    className='Link'
                >
                    <Shop data={rowData}></Shop>
                </div>
            );
        };
        return (<div>
            <ListView
                key='0'
                ref={el => this.lv = el}
                dataSource={this.state.dataSource}
                renderFooter={() => (<div style={{ padding: 30, textAlign: 'center' }}>
                    {this.state.isLoading ? 'Loading...' : 'Loaded'}
                </div>)}
                renderRow={row}
                renderSeparator={separator}
                useBodyScroll={this.state.useBodyScroll}
                onEndReached={this.onEndReached}
                pageSize={5}
            />
        </div>);
    }
}